<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        .right {
            color: green;
        }
        .wrong {
            color: #000;
        }
    </style>
</head>
<body>
   <input type="text" class="username"><span>请输入用户名</span>
   <script>
       //量词是设定某个模式出现的次数
       var reg = /^[a-zA-Z0-9_-]{6,16}$/;//表示用户只能输入大小写的字母和数字，下划线，横线
       var username = document.querySelector(".username");
       var span = document.querySelector("span");
       username.onblur = function () {
           if (reg.test(this.value)) {
               console.log(`正确的`);
               span.innerHTML = `用户名输入格式正确`;
               span.className = `right`;
           }else{
               span.className = `wrong`;
               span.innerHTML = `输入格式不正确`;
           }
       }
   </script>
</body>
</html>